<template>
  <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" style="--van-nav-bar-text-color: #FFC000;--van-nav-bar-icon-color:#FFC000"></van-nav-bar>
  <div v-if="loserInfor?.uid===null">
    <div class="visit-details">
      <p style="font-size: 16px;text-align: center;padding-bottom: 10px">校园卡寻卡凭证</p>
      <p style="font-size: 20px;text-align: center"><strong>{{receivedData}}</strong></p>
      <div style="padding-left: 10px">
        <p><strong>生成时间：</strong>{{formattedDateTime}}</p>
        <div>生成状态：成功</div>
        <div style="font-size: 14px;text-align: center">校园卡广播站将广播此校园卡</div>
      </div>
      <!-- Add more visit details as needed -->
    </div>
    <div style="font-size: 12px;padding-left: 10px">
      <h3>提示：</h3>
      <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系统已经自动生成该校园卡的丢失记录</strong></p>
      <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有拾卡者匹配成功可能会联系您</strong></p>
      <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;善意传递，暖人心田，感谢您</strong></p>
    </div>

  </div>

  <div v-if="loserInfor?.uid!=null">
    <div class="visit-details">
      <p style="font-size: 20px;text-align: center;padding-bottom: 10px">失主信息</p>
      <div style="padding-left: 10px">
        <p style="font-size: 16px">校园卡号：{{receivedData}}</p>
        <p style="font-size: 16px;padding-top: 3px"><strong>姓名：</strong>{{loserInfor?.uname}}</p>
        <p style="font-size: 16px;padding-top: 3px"><strong>班级：</strong>{{loserInfor?.uclass}}</p>
      </div>
    </div>
    <div style="font-size: 12px;padding-left: 10px">
      <h3>提示：</h3>
      <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;失主信息只展示姓名或手机号的一种</strong></p>
      <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系统已经向该用户发送丢失件提醒，可能会联系您</strong></p>
      <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您也可以主动联系该失主，感谢您善意传递，暖人心田</strong></p>
    </div>
  </div>
  <van-empty v-if="loserInfor==null" description="未找到该卡的失主" />
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from 'vue';
import {showFailToast, showSuccessToast} from "vant";
import cardAxios from "@/plugins/cardAxios.ts";
import type {cardType} from "@/model/card";
import {useRoute, useRouter} from "vue-router";
import type {userType} from "@/model/user";

const router = useRouter();
const props = defineProps(['visit']);
const onClickLeft = () => {
  router.replace("/");
};
const loserInfor = ref<userType>();
onMounted(async () => {
      const res = await cardAxios.post('/loser',{
        ubankcard:receivedData.value
      })
      // @ts-ignore
      if (res?.code === 40100 || res.data == null) {
        showFailToast('未关联学号');
      }
      // @ts-ignore
      else if (res?.code === 200 && res.data) {
        loserInfor.value = res.data
      }
      // @ts-ignore
      else if (res?.code === 50001 && res.data) {
        showFailToast('校园卡卡号或其他信息不完整');
      } else {
        showFailToast('校园卡卡号或其他信息不完整');
      }
    }
);
const route = useRoute();
const receivedData = ref(route.query.data);
const currentDateTime = ref(new Date());

onMounted(() => {
  // 页面加载时获取一次时间
  currentDateTime.value = new Date();
});

const formattedDateTime = computed(() => {
  const year = currentDateTime.value.getFullYear();
  const month = currentDateTime.value.getMonth() + 1; // 月份从0开始，所以要加1
  const day = currentDateTime.value.getDate();
  const hour = currentDateTime.value.getHours();
  const minute = currentDateTime.value.getMinutes();
  const second = currentDateTime.value.getSeconds();

  return `${year}年${month}月${day}日 ${hour}点${minute}分${second}秒`;
});
</script>

<style scoped>
/* Add your component styles here */
.visit-details {
  background-image: url('../../public/pinzheng.jpg');
  background-size: cover;  /* 或者使用 "contain"，取决于你的需求 */
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  background-color: #D3EDFA; /* Light grey background color */
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px; /* Optional: Add border-radius for rounded corners */
}

.visit-details ul {
  list-style-type: none;
  padding: 0;
}

.visit-details li {
  margin-bottom: 5px;
}
</style>
